<!-- 顶部导航组件 -->
<template>
  <div class="detail-nav-bar">
    <nav-bar class="nav-bar">
      <div slot="left" class="flex-center">
        <img
          class="back-img"
          src="~assets/img/common/back.svg"
          @click="backClick"
        />
      </div>
      <div slot="center" class="flex-center">
        <div
          class="center-item"
          v-for="(item, index) in centerList"
          :key="index"
          @click="switchClick(index)"
          :class="{ active: index == currentIndex }"
        >
          {{ item }}
        </div>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";

export default {
  name: "",
  props: {
    currentIndex: {
      type: Number,
      default: 0
    },
    centerList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  components: {
    NavBar
  },
  methods: {
    backClick() {
      this.$router.back();
    },
    switchClick(index) {
      this.$emit("topBarClick", index);
    }
  }
};
</script>

<style scoped>
.detail-nav-bar {
  background: #fff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.back-img {
  width: 22px;
}

.flex-center {
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.center-item {
  flex: 1;
}

.active {
  color: var(--color-tint);
}
</style>
